<template>
  <div>
    <el-card shadow="hover" body-style="width:100%;" style="width: 100%;height: 100px;margin-bottom: 30px;">
      <div class="input-card custom-input-card">
        <h4 style="color: turquoise;cursor: pointer">你想去哪？</h4>
        <div class="input-item">
          <el-row>
            <el-button type="primary" icon="el-icon-search" @click="infowindow1.open(map, [113.50871756128336, 34.81073277479713])">点我查找路径</el-button>
            <el-button type="success" icon="el-icon-check" @click="infowindow2.open(map, [113.50871756128336, 34.81073277479713])">点我查找附件景点</el-button>
            <el-button type="info" icon="el-icon-message" @click="infowindow3.open(map, [113.50871756128336, 34.81073277479713])">也可以点我</el-button>
          </el-row>
          <el-row style="margin-left: 30px">
            <input type="radio" name="func" checked="" value="rule" style="margin-left: 30px;color: aquamarine"><span class="input-text">距离测量</span>
            <input type="radio" name="func" value="measureArea" style="margin-left: 30px;color: aquamarine"><span class="input-text" >面积测量</span>
            <input id="close" type="button" class="btn" value="关闭" style="margin-left: 30px;color: #14c2c2">
          </el-row>
        </div>
      </div>
    </el-card>
    <div id="container" style="width: 100%;height: 1000px " />

  </div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      map: null,
      infoWindow: null
    }
  },
  mounted() {
    // 创建地图实例
    this.map = new AMap.Map('container', {
      zoom: 15,
      resizeEnable: true,
      center: [113.50871756128336, 34.81073277479713]
    })

    // 创建信息窗口
    this.infoWindow = new AMap.InfoWindow({
      anchor: 'top-right',
      content: "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
    })

    // 内容
    var content = '<img src="https://t7.baidu.com/it/u=1372614540,332857557&fm=193" style="width: 100px;height: 100px"><br></br>地址：河南省郑州市高新区科学大道136号郑州轻工业大学科学校区<br>电话：010-64733333<br><a href="http://ditu.amap.com/detail/B000A8URXB?citycode=110105" style="color: #0d8d84;cursor: pointer;" >详细信息:请点击我！！！</a>'

    // 将内容添加到 this.infoWindow 的 content 属性
    this.infoWindow.setContent(content)

    // 创建标记并绑定事件
    var marker = new AMap.Marker({
      position: new AMap.LngLat(113.50871756128336, 34.81073277479713),
      title: '郑州轻工业大学科学校区',
      icon: '//vdata.amap.com/icons/b18/1/2.png'
    })
    marker.on('click', (e) => {
      console.log('你在【' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + '】的位置点击了地图！！！')
      this.infoWindow.open(this.map, [113.50871756128336, 34.81073277479713])
    })
    this.map.add(marker)

    // 创建高级信息窗口
    var content = '<div class="info-title">高德地图</div><div class="info-content">' +
      '<img src="https://webapi.amap.com/images/amap.jpg">' +
      '高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br/>' +
      '<a target="_blank" href = "https://mobile.amap.com/">点击下载高德地图</a></div>'
    this.infowindow1 = new AMap.AdvancedInfoWindow({
      content: content,
      offset: new AMap.Pixel(0, -30),
      lnglat: [113.50871756128336, 34.81073277479713]
    })
    this.infowindow2 = new AMap.AdvancedInfoWindow({
      content: content,
      asOrigin: false,
      asDestination: false,
      offset: new AMap.Pixel(0, -30),
      lnglat: [113.50871756128336, 34.81073277479713]
    })
    this.infowindow3 = new AMap.AdvancedInfoWindow({
      content: content,
      placeSearch: false,
      asDestination: false,
      offset: new AMap.Pixel(0, -30),
      lnglat: [113.50871756128336, 34.81073277479713]
    })
    var mouseTool = new AMap.MouseTool(this.map)

    function draw(type) {
      switch (type) {
        case 'rule': {
          mouseTool.rule({
            startMarkerOptions: { // 可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), // 图标大小
                imageSize: new AMap.Size(19, 31),
                image: '//webapi.amap.com/theme/v1.3/markers/b/start.png'
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            endMarkerOptions: { // 可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), // 图标大小
                imageSize: new AMap.Size(19, 31),
                image: '//webapi.amap.com/theme/v1.3/markers/b/end.png'
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            midMarkerOptions: { // 可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), // 图标大小
                imageSize: new AMap.Size(19, 31),
                image: '//webapi.amap.com/theme/v1.3/markers/b/mid.png'
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            lineOptions: { // 可缺省
              strokeStyle: 'solid',
              strokeColor: '#FF33FF',
              strokeOpacity: 1,
              strokeWeight: 2
            }
            // 同 RangingTool 的 自定义 设置，缺省为默认样式
          })
          break
        }
        case 'measureArea': {
          mouseTool.measureArea({
            strokeColor: '#80d8ff',
            fillColor: '#80d8ff',
            fillOpacity: 0.3
            // 同 Polygon 的 Option 设置
          })
          break
        }
      }
    }
    var radios = document.getElementsByName('func')
    for (var i = 0; i < radios.length; i += 1) {
      radios[i].onchange = function(e) {
        draw(e.target.value)
      }
    }
    draw('rule')

    document.getElementById('close').onclick = function() {
      mouseTool.close(true)// 关闭，并清除覆盖物
      for (var i = 0; i < radios.length; i += 1) {
        radios[i].checked = false
      }
    }
  },

  methods: {
  }
}
</script>

<style scoped>
.custom-input-card .input-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px; /* 控制按钮向上移动的距离 */
}

</style>
